<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" href="css/style.css">
		<script src="./js/data.js"></script>
		<script src="https://unpkg.com/vue@3.2.0"></script>
	</head>

	<body>
		<!-- 199010127 吴金昔 -->
		<div id="shopcart" class="shop-cart">
			<div class="tabs">
				<div class="border">
					<!-- data-*表示自定义属性。 -->
					<div class="title active" data-index="0">
						全部商品
						<span class="count">3</span>
					</div>
					<div class="title" data-index="1">
						降价商品
						<span class="count">0</span>
					</div>
					<div class="title last" data-index="2">
						库存紧张
						<span class="count">0</span>
					</div>
					<div class="line"></div>
				</div>
			</div>

			<div class="lists">
				<div class="header">
					<ul class="clearfix">
						<li>
							<input type="checkbox" class="select-all">
							<label>全选</label>
						</li>
						<li class="product-info">商品信息</li>
						<li>单价</li>
						<li>数量</li>
						<li>金额</li>
						<li>操作</li>
					</ul>
				</div>
				
				<div id="shoplist" class="shoplist">
					<!-- 店铺内容及样式参考 -->

					<!-- 遍历店铺数据 -->
					<ul v-for="shop in shops">
						<li class="shop" >
							<div class="shop-info">
								<!-- 动态绑定店铺栏选中状态 -->
								<input type="checkbox" :checked="shop.isChecked">
								<span class="shop-tip">店铺：</span>
								<!-- 遍历店铺名称 -->
								<a class="shop-name" href="#">{{shop.shopName}}</a>
								<a href="#" class="wangwang">旺旺</a>
							</div>
							<div class="products">
								<!-- 遍历店铺商品数据 -->
								<div class="item" v-for="p in shop.products">
									<div class="select-logo">
										<!-- 动态绑定商品栏选中状态 -->
										<input type="checkbox" :checked="p.isChecked">
										<img :src="p.topImg" alt="产品logo">
									</div>
									<div class="product-detail">
										<div class="left">
											<!-- 商品名称 -->
											<a href="#" class="product-name">
												{{p.productName}}
											</a>
											<div class="logos">
												<a href="#" class="card">信用卡</a>
												<a href="#" class="service">保障服务</a>
												<a href="#" class="order">订单险</a>
												<a href="#" class="seven">7天无理由</a>
											</div>
										</div>
										<div class="right" v-html="p.spec">
											
										</div>
									</div>
									<!-- 遍历商品价格（折前折后） -->
									<div class="price">
										<p class="market-price">￥{{p.marketPrice}}</p>
										<p class="real-price">￥{{p.price}}</p>
									</div>
									<div class="count">
										<span class="sub" @click="p.count--">-</span>
										<span class="input"><input type="text" :value="p.count" id="add_delete"></span>
										<span class="add" @click="p.count++">+</span>
									</div>
									<!-- 计算每家店铺的商品价格 -->
									<div class="amount">￥{{p.price*p.count}}</div>
									<div class="delete">
										<a href="#">删除</a>
									</div>
								</div>
							</div>
						</li>
					</ul>	
				</div>
			</div>

			<div class="operate">
				<div class="left">
					<input type="checkbox" class="select-all-footer">
					<a href="javascript:void(0);">删除</a>
				</div>

				<div class="right">
					<!-- 计算所有商品数量 -->
					<div>已选择商品<span class="selected-count">{{totalCount}}</span>件</div>
					<!-- 计算所有商品价格总和 -->
					<div class="amount">合计（不含运费）： <span class="sum">￥{{totalPrice}}</span></div>
					<a href="javascript:void(0);" class="settle">结算</a>
				</div>
			</div>
		</div>
		<script>
			// 实现头部的动画
			var titles = document.querySelectorAll('.title')
			var line = document.querySelector('.line')
			for (let i = 0; i < titles.length; i++) {
				titles[i].addEventListener('mouseenter', function() {
					for (var j = 0; j < titles.length; j++) {
						titles[j].classList.remove('active')
					}
					this.classList.add('active')
					line.style.left = i * line.offsetWidth + 'px'
				})
			}

			// 创建应用实例
			Vue.createApp({
				data() {
					return {
						shops: shopcarts,
					};
				},
				methods:{
					addOne(){
						
					},
					deleteOne(){
						
					}
				},
				
				computed: {
					// 计算商品总价
					totalPrice: function () {
						let totalPrice = 0;
						this.shops.forEach((item) => {
							item.products.forEach(val => {
								if(val.isChecked){
									totalPrice += val.count * val.price
								}
							})
						})
						return totalPrice;
					},
					// 计算商品总数
					totalCount: function () {
						let totalCount = 0;
						this.shops.forEach((item) => {
							item.products.forEach(val => {
								if(val.isChecked){
									totalCount += val.count;
								}
								
							})
						})
						return totalCount;
					}
				}
			}).mount("#shopcart");
		</script>
	</body>

</html>
